<template>
  <div class="box">
<!--    第一行-->
    <!--<el-row class="first_line">
      <el-col :span="8">
        <div style="font-size: 25px;">
          首页监控大屏
        </div>
      </el-col>
      &lt;!&ndash;      <el-col :span="8" 空白区域></el-col>&ndash;&gt;
      <el-col :span=" 8" :offset="8">
        <el-row>
          <el-col class="time" id="time" :span="20">
          </el-col>
          <el-col :span="3">
            <el-button
              style="font-size: 25px;color: #ccd8e0"
              icon="el-icon-s-tools"></el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>-->
    <my_header></my_header>

    <router-view></router-view>
<!--    第二行-->
    <el-row class="second_line">
      <!--今日舆情-->
      <el-col :span="6">
        <today_yuQing v-bind:today_yuqing_data="today_hot_yuQing_data"></today_yuQing>
      </el-col>
      <!--舆情地图-->
      <el-col :span="12">
        <yuQing_map></yuQing_map>
      </el-col>
      <el-col :span="6">
        <!--舆情概论-->
        <el-row>
          <yuQing_gaiLun></yuQing_gaiLun>
        </el-row>
        <!--舆情属性-->
        <el-row>
          <today_yuQing_shuxing
            v-if="yuQing_shuXing_flag"
            :yuQing_shuXing_data="yuQing_shuXing_data"></today_yuQing_shuxing>
        </el-row>
      </el-col>
    </el-row>

<!--    第三行-->
    <el-row class="third_line">
      <!--七日热点舆情-->
      <el-col :span="6">
        <seven_hot_yuQing
          v-if="seven_hot_yuqing_flag"
          v-bind:seven_hot_yuQing_data="seven_hot_yuQing_data"></seven_hot_yuQing>
      </el-col>
      <el-col :span="12" >
        <seven_yuQing_fenXi
          v-if="seven_yuQing_fenxi_flag"
          :seven_yu-qing_fenxi="seven_yuQing_fenxi_data"></seven_yuQing_fenXi>
      </el-col>
      <!--舆情来源-->
      <el-col :span="6">
        <today_data_source
          v-if="today_data_source_flag"
          v-bind:today_data_source_data="today_data_source_data"></today_data_source>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import today_data_source from "../components/index/today_data_source";
import seven_yuQing_fenXi from "../components/index/seven_yuQing_fenXi";
import seven_hot_yuQing from "./seven_hot_yuQing/seven_hot_yuQing";
import today_yuQing_shuxing from "../components/index/today_yuQing_shuXing";
import yuQing_gaiLun from "../components/index/yuQing_gaiLun";
import yuQing_map from "./yuQing_map/yuQing_map";
import today_yuQing from "./today_yuQing/today_yuQing";
import my_header from "../components/my_header";

export default {
  name: "index",
  components: {
    today_data_source,
    seven_yuQing_fenXi,
    seven_hot_yuQing,
    today_yuQing_shuxing,
    yuQing_gaiLun,
    yuQing_map,
    today_yuQing,
    my_header
  },
  created() {
    // console.log("fu,create")
    this.getIndexData()
    // console.log("fu,create2")
  },
  mounted() {

  },
  data() {
    return {
      seven_hot_yuQing_data: [],
      today_hot_yuQing_data: [],
      seven_hot_yuqing_flag: false,
      today_yuQing_shuXing1:[],
      today_data_source_data:[],
      today_data_source_flag:false,
      yuQing_shuXing_data:[],
      yuQing_shuXing_flag:false,
      seven_yuQing_fenxi_data:[],
      seven_yuQing_fenxi_flag:false,

    }
  },
  methods: {
    // 获取首页信息
    async getIndexData() {
      let {data: res} = await this.$http.get("http://192.168.0.94:8080/index")
      this.seven_hot_yuQing_data = res.data.day7shotArticle
      this.seven_hot_yuqing_flag = true
      this.today_hot_yuQing_data = res.data.todayhotArticle
      this.today_data_source_data = res.data.todyDataSource
      this.today_data_source_flag = true
      this.yuQing_shuXing_data = res.data.todyemtionTrend
      this.yuQing_shuXing_flag = true
      this.seven_yuQing_fenxi_data = res.data.day7emtionTrend
      this.seven_yuQing_fenxi_flag = true

      // console.log("res.data", res.data)
      // console.log("res.data.todyemtionTrend", res.data.todyemtionTrend)
      console.log("this.seven_yuQing_fenxi_data",this.seven_yuQing_fenxi_data)
      // console.log("today_hot_yuQing_data", this.today_hot_yuQing_data)
    }
  }
}
</script>

<style scoped>
* {
  background-color: #415c80;
}

.time {
  height: 40px;
  color: #ccd8e0;
}

.box{
  width: 1500px;
  /*height: 700px;*/
}
.first_line{

}
.second_line{

}
.third_line{
  height: 280px;
}
</style>
